<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
    1、想要vue工作，就必须创建一个vue实例，且要传入一个配置对象。
    2、root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法。
    3、root容器里的代码被称为 vue模板 -->

    <!-- vue实例工作时先扫描容器里的模板，看是否有vue的语法，进行解析 -->

    <div id="a">
        <!-- 插值语法{{}} -->
        <h3>我的名字是{{name}}</h3>
        <button @click='demo'>这是一个按钮</button>
        <input type="text" v-model:value='bb'>文本框
    </div>

</body>
<script>
    //全局配置
    //组织vue在启动时生成生产提示
    Vue.config.productionTip = false
    //创建vue实例
    //传一个配置对象
    const vm = new Vue({
        //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        //还可以自己获取元素给它
        el: '#a',
        data: {//data中用于存储数据，供el所指定的容器去使用,暂时先写成对象
            name: 'xiaoyao',
            value: 'nihao',
            bb: '你好啊'
        }
        ,
        methods: {
            demo() {
                console.log('你点击了一下');
            }

        }
    });

</script>

</html>